<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="预订确认"
  >
    <div class="modal-main" style="position: relative;">
      <Spin :withIcon="true" v-if="loadingConfig"></Spin>
      <slot></slot>
      <div class="flx-row-c-c" style="margin-top: 30px;">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确定
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">取消</div>
      </div>
    </div>
  </Modal>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    submit() {
      this.$emit('submit')
    },
    cancel() {
      this.config = false;
    }
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
    loadingConfig: {
      get() {
        return this.loading;
      },
      set(val) {
        this.$emit("update:loading", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;
}
</style>